<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<script>
				cmdList = "/ace/country/select.action";
		</script>
	</head>
<body  class="no-skin">
			<div class="page-content">
					<form id="queryForm" action="${cmdList}">
					<div class="page-content-area">
							<div class="row">
								 <div class="col-sm-12">
										<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;">
												<div class="widget-header widget-header-blue widget-header-flat">
													<h4 class="widget-title">数据查询</h4>
						
													<div class="widget-toolbar">
														<a href="#" data-action="collapse">
															<i class="ace-icon fa fa-chevron-up"></i>
														</a>
													</div>
												</div>

												<div class=" widget-body">
														<div class="widget-main" >
																	<div class="form-group col-xs-6 col-sm-6  col-md-4 col-lg-4">
																		<label class="col-sm-4 control-label" style="text-align:right" for="name">ID:</label>
														
																		<div class="col-sm-8">
																			<input type="text" id="_leq_countryid" name="_leq_countryid" class="col-xs-12 col-sm-12">
																		</div>
																	</div>
																	
																	<div class="form-group col-xs-6 col-sm-6  col-md-4 col-lg-4">
																		<label class="col-sm-4 control-label" style="text-align:right" for="id"> NAME: </label>
														
																		<div class="col-sm-8">
																			<input type="text" id="_sk_countryname" name="_sk_countryname" class="col-xs-12 col-sm-12">
																		</div>
																	</div>
																	
																	<div class="col-md-12 center">
																			<div class="col-xs-3"></div>
																			<div class="col-xs-6">
																				<button class="btn btn-purple btn-lg no-border" type="button" name="btn-query">
																					<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
																					查询
																				</button>
																				&nbsp;&nbsp;&nbsp;
																				<button class="btn btn-grey btn-lg no-border" type="reset">
																					<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
																					重置
																				</button>
																			</div>
																   </div>
														</div><!-- /.widget-main -->
												</div><!-- /.widget-body -->
											</div><!-- /.widget-box -->
									</div><!-- /.col-sm-12 -->
								</div><!-- /.row -->
							 
								<hr style="margin-top:0px;margin-bottom:0x">
								<div class="row">
									<div class="col-xs-12">
										<div>
											<table id="jquery-table" class="table table-striped table-bordered table-hover">
													<thead>
														<th>PK</th>
														<th>ID</th>
														<th>Name</th>
														<th>createtime</th>
														<th>memo</th>
													</thead>
													<tbody>
													</tbody>
											</table>
										</div>
									</div><!-- /.col -->
							</div><!-- /.row -->
						</div><!-- /.page-content-area -->
					</form>
				</div><!-- /.page-content -->
			
		<%@ include file="/common/common-js.jsp" %>
		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			var jqTable =null;
			jQuery(function($) {
				jqTable = $('#jquery-table').dataTable( {
					//表格整体布局
					"sDom": "<t<'row'<'col-xs-12 col-md-12'<'col-xs-3 col-md-2 col-lg-2'l><'col-xs-3 col-md-1 col-lg-1'i><'col-xs-6 col-md-9 col-lg-9'p>>>>.",
				  	//表头列控制(包括对应数据列名称、控制列显隐、是否排序及排序规则等等)
				  	"columns": [
				  		{ "data": "PK" ,"bSortable": false},
				  		{ "data": "countryid" ,"bSortable": false},
                        { "data": "countryname", "visible": true,"bSortable": true},
                        { "data": "createtime","bSortable": true},
                        { "data": "memo" ,"bSortable": false}
                    ],
                    "sColumns":["countryid","countryname","createtime","memo"],
                    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
				    "columnDefs": [// 将Salary列变为红色
				   		 {
				   		 	  "sWidth":60,
				    		  "targets": [0], // 
				    	  	  "data": "PK", // 数据列名
		                      "render": function(data, type, full) { // 返回自定义内容
		                      	return '<button PK="'+full.countryid+'|'+full.countryname +'" class="btn btn-xs btn-success no-border" type="button"><i class="ace-icon fa fa-check bigger-120"></i></button>';
		                      }
				    	},
				    	{
				    		  "name":"countryid",
				    	  	  "targets": [1], // 
		                      "data": "countryid"
				    	},
				    	{
				    		  "name":"countryname",
				    	  	  "targets": [2], // 
		                      "data": "countryname"
				    	},
				    	{
				    		  "name":"createtime",
				    	  	  "targets": [3], // 
		                      "data": "createtime"
				    	},
				    	{
				    		  "name":"memo",
				    	  	  "targets": [4], // 
		                      "data": "memo"
				    	}
                  	],
					"bPaginate": true, //翻页功能
					"bLengthChange": true, //改变每页显示数据数量
					"bFilter": false, //过滤功能
					"bSort": true, //排序功能
					"bInfo": true,//页脚信息
					"bAutoWidth": true,//自动宽度
					"sPaginationType" : "full_numbers",
					"oLanguage": {
						"sLengthMenu": "每页显示 _MENU_ 条",
						"sZeroRecords": "抱歉， 没有找到",
						//"sInfo": "当前显示 _START_ 到 _END_ 条 / 共 _TOTAL_ 条数据",
						"sInfo": "共 _TOTAL_ 条",
						"sInfoEmpty": "没有数据",
						"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
						"oPaginate": {
							"sFirst": "首页",
							"sPrevious": "前一页",
							"sNext": "后一页",
							"sLast": "尾页"
						},
						"sSearch" : "搜索:",//搜索框前的文本设置
						"sProcessing" : "<div style='position: fixed; z-index: 2000; top: 300px; left: 500px;' class='ajax-loading-overlay'><i class='ajax-loading-icon fa fa-spin fa-spinner fa-5x orange'></i> </div>", //设置进度条显示文本
						"sZeroRecords": "没有检索到数据",
						"sInfoEmpty" : "没有数据"
					},
					"sPaginationType": "full_numbers",//显示数字的翻页样式
					"bStateSave": false, //状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。
					"sScrollY": "385px",//垂直限制宽度
					"sScrollX": "100%", //水平限制宽度
					"sScrollYInner": "100%",
					"sScrollXInner": "100%",
					"bScrollCollapse": true,
					"bProcessing": true,//请求等待
					"bServerSide": true,//后台获取数据
					"sAjaxSource": ctx+"/ace/country/select.action?rand="+Math.random(),//数据源URL
					"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
							$.ajax({
								"dataType": 'json',
								"type": "POST",
								"url": sSource,
								"data":{
									"aoData":JSON.stringify(aoData), //包含分页属性、排序字段、排序方式等等
									"_sk_countryname": $("#queryForm input[name='_sk_countryname']").val(),
									"_leq_countryid": $("#queryForm input[name='_leq_countryid']").val()
								},
								"success": function(resp){
								    //console.log(resp);
									fnCallback(resp);
									initSelectPage();
								}
							});
					}
			    });
			    
			    /** =============================[start 按钮点击事件 start] ============================== **/
			    //【查询】按钮Click事件
			    $("button[name='btn-query']").bind("click", function () { //按钮 触发table重新请求服务器
        			jqTable.fnDraw();
    			});
			    /** =============================[end 按钮点击事件 end] ============================== **/
			    
		})//end jquery初始化
	   </script>
</body>
</html>
